<!--
 * @Descripttion: 头部
 * @version: 
 * @Author:Hui
 * @Date: 2023-07-03 15:44:14
 * @LastEditTime: 2023-12-14 18:46:32
 * @LastEditors: sueRimn
-->

<template>
  <view class='search' :style="{ paddingTop: statusBarHeight + 'px' }">
    <view class='search-content d-flex align-items-center'>
      <!-- #ifdef H5 -->
      <view class='back-btn' @click="goBack">
        <uni-icons type="back" size="24" color="#333"></uni-icons>
      </view>
      <!-- #endif -->
      <view class='search-box d-flex align-items-center flex-fill' @click="goSearch">
        <uni-icons type="search" class="icon" size="24" color="#999"></uni-icons>
        <view class='text'>搜索您想估价的机型</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    statusBarHeight() {
      return uni.getSystemInfoSync().statusBarHeight || 0;
    }
  },
  methods: {
    goSearch() {
      uni.navigateTo({ url: '/pages/search/index' })
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>

.search {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #fff;

  .search-content {
    padding: 12rpx 16rpx;
  }

  .back-btn {
    width: 80rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
  }

  .search-box {
    background: #F6F7F9;
    border-radius: 50rpx;
    height: 72rpx;
    padding: 0 0 0 32rpx;
    .icon{
      margin: 0 10rpx 0 0rpx;
      display: inline-block;
    }

    .text {
      font-size: var(--hui-font-size-26);
      color: var(--hui-color-subtitle);
    }
  }
}
</style>